<template>

  <!-- 登录提示 -->
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12" style="text-align: center;"><h1>请先进行登录</h1></el-col>
    <el-col :span="6"></el-col>
  </el-row>

  <!-- 登录表单 -->
  <el-row>

    <el-col :span="6"></el-col>

    <el-col :span="12">

      <el-form :model="form" class="form" ref="formRef" :rules="formRules">

        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit">登录</el-button>
        </el-form-item>

      </el-form>

    </el-col>

    <el-col :span="6"></el-col>

  </el-row>

  <!-- 注册提示 -->
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12" style="text-align: center;"><h1>或在此处进行注册</h1></el-col>
    <el-col :span="6"></el-col>
  </el-row>

  <!-- 注册表单 -->
  <el-row>

    <el-col :span="6"></el-col>

    <el-col :span="12">

      <el-form :model="register" class="form" ref="registerRef" :rules="registerRules">

        <el-form-item label="邮箱/账号" prop="email">
          <el-input v-model="register.email"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="register.password"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="register.phone"></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="name">
          <el-input v-model="register.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onRegister">注册</el-button>
        </el-form-item>

      </el-form>

    </el-col>

    <el-col :span="6"></el-col>

  </el-row>

</template>

<script>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import useIPAddress from '../hooks/useIPAddress.js'

export default {
  setup () {

    // 配置axios请求的ip地址
    const ip = useIPAddress()

    // 操作页面
    const router = useRouter()

    // 登录表单
    const form = reactive({
      account: '',
      password: ''
    })

    // 登录表单规则
    const formRef = ref()
    const formRules = {
      account: {
        required: true,
        trigger: 'blur',
        message: '账号不能为空!',
      },
      password: {
        required: true,
        trigger: 'blur',
        message: '密码不能为空!',
      }
    }

    // 登录按钮
    function onSubmit() {
      formRef.value.validate(valid => {
        if (valid) {
          axios({
            url: `http://${ip}/login`,
            method: 'POST',
            params: {
              account: form.account,
              password: form.password
            },
            withCredentials: true //解决了cookie这个2B老是设置不了的问题，同时注意要访问数字ip
          }).then((res) => {
            ElMessageBox.alert(res.data.message, '提示')
            if (res.data.check) {
              router.push('/Me')
            }
          })
        }
      })
    }

    // 注册表单
    const register = reactive({
      email: '',
      phone: '',
      name: '',
      password: ''
    })

    // 注册表单规则
    const registerRef = ref()
    const registerRules = {
      email: {
        required: true,
        trigger: 'blur',
        message: '邮箱不能为空!',
      },
      phone: {
        required: true,
        trigger: 'blur',
        message: '手机号不能为空!',
      },
      name: {
        required: true,
        trigger: 'blur',
        message: '昵称不能为空!',
      },
      password: {
        required: true,
        trigger: 'blur',
        message: '密码不能为空!',
      }
    }

    // 注册按钮
    function onRegister() {
      // 规则验证
      registerRef.value.validate(valid => {
        if (valid) {
          axios({
            url: `http://${ip}/register`,
            method: 'POST',
            data: register
          }).then(res => {
            ElMessageBox.alert(res.data, '提示')
          }).catch(err => {
            ElMessageBox.alert(err.message, '提示')
          })
          registerRef.value.resetFields()
        }
      })
    }

    return {
      form,
      onSubmit,
      formRef,
      formRules,
      register,
      onRegister,
      registerRef,
      registerRules
    }
  }
}
</script>

<style scoped>
  .form {
    border: 2px solid #EEA8A8;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }
</style>